<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <title>$Title$</title>
</head>
<body>
<div class="btnGroup">
  <img src="" alt="">
  <br>
  <button>生成Token</button>
  <button>删除Token</button>
  <br>
  <br>
  <input type="file">
  <br>
  <br>
  <input type="file" multiple>
  <br>
  <br>
  <button>查询</button>
  <button>新增</button>
  <button>修改</button>
  <button>删除</button>
</div>
</body>

<script>
  const doms = document.querySelectorAll('button')
  const fileDoms = document.querySelectorAll('input')
  const imgDom = document.querySelector('img')

  fileDoms[0].addEventListener('change', (e) => {
    const formData = new FormData()
    formData.append('name', '张三')
    formData.append('age', 28)
    formData.append('hobbies', ['篮球', '足球', '大保健'])
    formData.append('avatar', e.target.files[0])
    axios.post('http://localhost:1086/api/user', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
        Authorization: localStorage.getItem('token')
      }
    }).then(res => {
      console.log(res)
    })
  })
  fileDoms[1].addEventListener('change', (e) => {
    const formData = new FormData()
    formData.append('name', '张三')
    formData.append('age', 28)
    formData.append('hobbies', ['篮球', '足球', '大保健'])
    Array.from(e.target.files).forEach(item => {
      formData.append('avatar', item)
    })
    axios.post('http://localhost:1086/api/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
        Authorization: localStorage.getItem('token')
      }
    }).then(res => {
      console.log(res)
    })
  })



  doms.forEach(item => {
    item.addEventListener('click', () => {
      switch (item.innerText) {
        case '生成Token':
          fetch('http://localhost:1086/api/token', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              username: 'admin',
              password: 'cz1086'
            })
          })
            .then(res => res.json())
            .then(res => {
              localStorage.setItem('token', res.data)
            })
          break
        case '删除Token':
          localStorage.removeItem('token')
          break
        case '上传':
          break
        case '下载':
          break
        case '查询':
          axios.get('http://localhost:1086/api/user', {
            headers: {
              Authorization: localStorage.getItem('token')
            }
          }).then(res => {
            console.log(res)
            imgDom.src = res.data.data.find(item => item.avatar).avatar
          })
          break
        case '新增':
          fetch('http://localhost:1086/api/user', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              Authorization: localStorage.getItem('token')
            },
            body: JSON.stringify({
              name: '张三',
              age: 18,
              hobbies: ['篮球', '足球']
            })
          })
            .then(res => res.json())
            .then(res => {
              console.log(res)
            })
          break
        case '修改':
          fetch('http://localhost:1086/api/user/664c6a94ca60dafa5f961088', {
            method: 'PUT',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              name: '李四光'
            })
          })
            .then(res => res.json())
            .then(res => {
              console.log(res)
            })
          break
        case '删除':
          fetch('http://localhost:1086/api/user/664c6a94ca60dafa5f961088', {
            method: 'DELETE',
          })
            .then(res => res.json())
            .then(res => {
              console.log(res)
            })
          break
      }
    })
  })
</script>

</html>
